<template>
  <div class="content">
    <div class="warpper main">
      <div class="essay-box bgWhite">
        <div class="essay-box_title">
          <h1>{{ raContent.ctitle }}</h1>
          <div class="essay-box_desc">
            #{{ raContent.type ? raContent.type.typename : "其它" }}&nbsp;&nbsp;{{
              getDate(raContent.createdAt)
            }}
            &nbsp;&nbsp;阅读/{{ raContent.cshow }}
          </div>
        </div>
        <div class="preface">
          <p> {{raContent.cPreface}}</p>
        </div>
        <article v-html="raContent.cHtmlContent" class="markdown-body"></article>
      </div>
      <Common :cardid="this.$route.params.id" />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import config from "../../../utils/config";
import { formatDate } from "../../../utils/util.js";
@Component({
  head() {
    return {
      title: !(this as any).raContent
        ? "itliuyang"
        : (this as any).raContent.ctitle,
      titleTemplate: "%s - 刘洋博客",
    };
  },
  async asyncData({ app, params }) {
    const res = await app.$axios.$post(
      config.BASE_URL + "/api/article/detail",
      {
        cid: params.id,
      }
    );
    return {
      raContent: res.d,
    };
  },
})
export default class extends Vue {
  raContent: Object = {};

  created() {}
  getDate(str: string) {
    return formatDate(str);
  }
  sendMsg(msg: string) {}

  mounted() {
    this.$nextTick(() => {
      let md = document.getElementsByClassName("markdown-body")[0];
      let mdImgs = md.getElementsByTagName("img");
      for (let i = 0; i < mdImgs.length; i++) {
        mdImgs[i].addEventListener("click", function (e) {
          let B = document.getElementsByTagName("body")[0];
          let imgMask = document.createElement("div");
          imgMask.className = "imgMask";
          imgMask.addEventListener("click", function (e) {
            imgMask.remove();
          });

          let imgWarp = document.createElement("div");
          imgWarp.className = "imgWarp";
          imgMask.appendChild(imgWarp);

          let imgBox = document.createElement("img");
          imgBox.src = mdImgs[i].src;
          imgWarp.appendChild(imgBox);

          imgMask.appendChild(imgWarp);

          B.appendChild(imgMask);
        });
      }
    });
  }
}
</script>
<style scoped lang="scss">
.essay-box {
  margin-bottom: 30px;
  padding: 20px;

  h1 {
    margin-bottom: 0;
    padding: 10px 0;
  }
  &_title {
    margin-bottom: 10px;
  }
  &_desc {
    // background: rgba(169, 169, 169, 0.1);
    padding: 10px;
  }
}
.preface {
  margin: 10px 0;
  padding: 24px 32px;
  border-left: 4px solid #1890ff;
  background: rgba(87, 176, 253, 0.11);
  position: relative;
  &::after {
    content: "❞";
    font-size: 30px;
    position: absolute;
    right: 8px;
    bottom: 0;
    color: #1890ff;
    opacity: 0.7;
  }
  &::before {
    content: "❝";
    top: 8px;
    left: 8px;
    color: #1890ff;
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    position: absolute;
    opacity: 0.7;
  }
  p {
    line-height: 20px;
    margin: 10px 0;
    font-size: 16px;
  }
}



</style>
